<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<div class="cuIcon-back icon left" @click="back"></div>
				<div class="center">
					<view class="cu-bar ">
						<view class="search-form round mySearch" style="margin: 0;padding: 0;">
							<input v-model="searchVal" type="text" placeholder=" 输入搜索内容/关键字" placeholder-style="text-align:center" placeholder-class='cuIcon-search' style="text-align: center;" />
						</view>
					</view>
					<!-- 题库 -->
				</div>
			</view>
		</view>
		<div style="width: 100%;height: 90rpx;"></div>
		<div class='listCont'>
			<div class='practiceItem' v-for='(item,index) in listData' :key="'index'+index">
				<div class='left'>
					<div class='title'>{{item.name}}</div>
				</div>
				<div class='right'>
					<div class='answer' @click='answerTo(item)'>查看</div>
				</div>
			</div>
			<!-- 		<div class='item'>
				<div class='contItem'>
					<div class='left'>
						<div class='title'>第一章 读图与绘图</div>
						<div class='info'>共2节 | 已学 0分钟</div>
					</div>
					<div class='right open'></div>
					<div class='right close'></div>
				</div>
				<div class='listItem'>
					<div class='name'>1.1 图样分析</div>
					<div class='right'></div>
				</div>
				<div class='listItem'>
					<div class='name'>1.1 图样分析</div>
					<div class='right'></div>
				</div>
			</div>
			<div class='item'>
				<div class='contItem'>
					<div class='left'>
						<div class='title'>第一章 读图与绘图</div>
						<div class='info'>共2节 | 已学 0分钟</div>
					</div>
					<div class='right open'></div>
					<div class='right close'></div>
				</div>
			</div> -->
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				openIndex: -1,
				searchVal: '',
				data: [],
				page_index: 1,
				page_num: 20,
				count: 1,
				listData: [],
			}
		},
		onLoad(e) {
			//console.log('e==入参===', e)
			this.id = e.id
		},
		onShow() {
			// // document.title = '预约规则';
			this.getData()
			//console.log('执行了onShow')
		},
		mounted() {},
		watch: {
			searchVal(val) {
				this.getData()
				//console.log('val==', val)
			},
		},
		onReachBottom() {
			//console.log(this.count/this.page_index)
			if (this.count / this.page_index > this.page_num) {
				this.page_index++;
				this.getMoreData();
				//console.log('加载更多');
			} else {
				//console.log('没有更多了');
			}
		},
		methods: {

			getData() {
				let _this = this;
				_this.uniRequest({
					url: '/practice/examination_catalogue',
					method: 'post',
					data: {
						name: _this.searchVal,
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {

							this.listData = res.data.list;
							this.count = res.data.count || 0


						}
					},
				});
			},
			getMoreData() {
				let _this = this;
				_this.uniRequest({
					url: '/practice/examination_catalogue',
					method: 'post',
					data: {
						name: _this.searchVal,
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.listData = this.listData.concat(res.data.list);
							this.count = res.data.count || 0
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			back() {
				// uni.navigateTo({
				// 	url: `/pages/course/index`
				// });
				uni.navigateTo({
					url: `/pages/index/index?type=3`
				});
			},
			answerTo(item) {
				//console.log('item=查看试卷=', item)
				uni.navigateTo({
					url: `/pages/course/answer?classroom_practice_id=${item.id}&is_answer=2&type=2&from=6&more=2`
				});
			},

		}
	}
</script>

<style lang='less' scoped>
	.content {
		.topNav {
			background: #1C81DF;
			color: white;
background: #fffaf0;
			color: #000000;
			.cu-bar {
				margin-top: -36rpx;
				width: 90%;
				float: right;
				box-sizing: border-box;
			}
		}

		;

		.mySearch {
			background: #FFFFFF;
			/* width: 10%; */
		}

		.listCont {

			.practiceItem {
				padding: 32rpx;
				background: #FFFFFF;
				
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 48rpx;
				border-top: 1px solid #9a9a9a;

				.left {
					max-width: calc(100% - 160rpx);

					.title {
						font-size: 30rpx;
						font-weight: bold;
						color: #575C65;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.right {
					.again {
						width: 140rpx;
						background: white;
						border: 1px solid #1C81DF;
						border-radius: 28rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #1C81DF;
						line-height: 56rpx;
						text-align: center
					}

					.results {
						width: 140rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: normal;
						color: #FF9E56;
						line-height: 48rpx;
						position: relative;
					}

					.results::after {
						content: '';
						position: absolute;
						right: 0;
						top: calc(50% - 10rpx);
						background: url(~@/static/imgs/icon_chakan_shijuan.png) no-repeat center;
						background-size: 100% 100%;
						width: 10rpx;
						height: 20rpx;
					}

					.answer {
						background: linear-gradient(90deg, #41B1F6 0%, #1C81DF 100%);
						width: 140rpx;
						border-radius: 28rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center
					}
				}
			}
		}
	}
</style>
